<template>
  <div>
    <!-- 头部- -->
    <div class="top-gd">
    <div class="top-title-container">
      <div class="top-title">特色课</div>
      <div class="top-search" @click="toSearch">
        <van-icon name="search" size="25px" />
      </div>
    </div>
    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item title="分类" ref="sx">
        <div class="down-cate-container">
          <div class="down-cate-wrapper">
            <div class="cate-title" v-for="(item, index) in attrclassify" :key="index">
              <p>{{ item.name }}</p>
              <ul>
                <li v-for="(t, i) in item.child" :key="i" :class="t.checked ? 'li1' : 'li'" @click="sx(index, i)">
                  {{ t.name }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 分类-按钮 -->
          <div class="cate-button-container">
            <div><button  @click="cz">重置</button></div>
            <div><button class="button-sure" @click="qd">确定</button></div>
          </div>
        </div>  
      </van-dropdown-item>
      <van-dropdown-item title="排序" ref="stor" v-model="value1" :options="option1" @change="option">

      </van-dropdown-item>
      <van-dropdown-item title="筛选" ref="item">
        <div class="down-choose-container">
          <div class="choose-main">
            <div>全部</div>
            <div>大班课</div>
            <div>小班课</div>
            <div>公开课</div>
            <div>点播课</div>
            <div>面授课</div>
            <div>音频课</div>
            <div>系统课</div>
            <div>图文课</div>
            <div class="choose-lastone">会员课</div>
          </div>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    </div>

    <!-- 特色课主要内容 -->
    <div class="course-main-container">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="default">
      <div class="course-main-wrapper" v-for="(item, index) in list" :key="index" @click="push(item)"> 
        <!-- box -->
        <p class="main-title">{{ item.title }}</p>
        <div class="main-data">
          <div><van-icon name="clock-o" /></div>
          <div>
          {{
            new Date(item.end_play_date).toLocaleString() +
            "~" +
            new Date(item.start_play_date).toLocaleString()
          }}
          </div>
        </div>
        <ul class="teacher">
          <li v-for="(t, i) in item.teachers_list" :key="i" v-if="i <1">
            <img :src="t.teacher_avatar" alt />
            <p>{{ t.teacher_name }}</p>
            <img alt="" v-if="item.has_buy == 1" style="width: 50px; height: 50px"/>
          </li>
        </ul>
        <div class="info">
          <p>{{ item.sales_num }}人已经报名</p>
          <p style="color:green">{{ item.price == 0 ? "免费" : item.price }}</p>
        </div>
      </div>
    </van-list>
    </div>

  </div>
</template>

<script>
import { DropdownMenu, DropdownItem, List, NavBar, Button } from "vant";
import {xwCourse,xwCourseChoose,xwChooseData} from "../../utils/http";

export default {
  name: "",
   data() {
    return {
      value1:0,
       option1:[
        { text: "最新", value: 1 },
        { text: "最热", value: 2 },
        { text: "价格升序", value: 3 },
        { text: "价格降序", value: 4 }
      ],
      attrclassify: [], //筛选列表数据
      list: [], //课程列表数据
      loading: false,
      finished:true,
      pages: {
        page: 1,
        limit:65,
      },
    };
  },
  mounted() {

    //渲染课程列表
    xwCourse(this.pages).then((res) => {
      console.log(res);
      this.list = res.list;
    });

    //渲染筛选列表
    xwCourseChoose().then((res) => {
      console.log(res);
      res.attrclassify.forEach((element) => {
        element.child.forEach((item) => {
          item.checked = false;
        });
      });
      this.attrclassify = res.attrclassify;
    });

  },
  methods: {

    push(item){
      console.log(item);
      this.$router.push({path: "/detail",query: {id: item.id}});
    },

    // 下拉菜单
    onConfirm(){
      this.$refs.item.toggle();
    },

    //去搜索页
    toSearch(){
      this.$router.push("/search");
    },

    //筛选出来的数据
    option(vlaue) {
      xwChooseData({
        page:1,
        limit: 10,
        course_type: 0,
        classify_id: "",
        order_by: vlaue,
        attr_val_id: "",
        is_vip: 0,
      }).then((res) => {
        this.list = res.list;
      });
    },

    //跳转搜索页面
    search() {
      this.$router.push("/search");
    },

    //实现下拉加载
    onLoad(){
      this.pages.page++;
      console.log(this.pages);
      xwCourse(this.pages).then((res) => {
        console.log(res);
        this.list = this.list.concat(res.list);
        this.loading = false;
        if (this.list.length >= res.total) {
          this.finished = true;
        }
      });
    },

     // 确定按钮
    qd() {
      var arr = [];
      this.attrclassify.forEach((element) => {
        element.child.forEach((res) => {
          if (res.checked) {
            0;
            arr.push(res.id);
          }
        });
      });
      console.log(arr);
      var str = "";
      for (let i = 0; i < arr.length; i++) {
        str += arr[i] + ",";
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1);
      }
      xwChooseData({
        page: 1,
        limit: 10,
        course_type: 0,
        classify_id: "",
        order_by: "",
        attr_val_id: arr,
        is_vip: 0,
      }).then((res) => {
        console.log(res);
        this.list = res.list;
        this.$refs.sx.toggle();
      });
    },

    // 分类按钮
    sx(index, i) {
      console.log(index, i);
      this.attrclassify[index].child.forEach((res) => {
        res.checked = false;
      });
      this.attrclassify[index].child[i].checked =!this.attrclassify[index]
        .child[i].checked;
    },

    // 重置按钮
    cz() {
      this.attrclassify.forEach((element) => {
        element.child.forEach((item) => {
          item.checked = false;
        });
      });
    },

  },
  components: {
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [List.name]: List,
  },
};
</script>

<style scoped>
/* 头部 */
.top-gd{
  position: fixed;
  top:0px;
  left:0px;
  z-index:999;
  background-color:white;
  width:100%;
}
.course-container {
  width: 100vw;
  height: 100vh;
  /* background-color: lightblue; */
}
.top-title-container {
  width: 100%;
  height: 54px;
  font-size: 20px;
  border-bottom: 1px solid lightgrey;
  position: relative;
}
.top-title {
  position: absolute;
  top: 28%;
  left: 42.5%;
}
.top-search {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 22%;
  right: 2%;
  width: 35px;
  height: 35px;
}

/* 筛选 */
.down-cate-container {
  width: 100%;
  height: 52vh;  
  /* background-color: lightpink; */
}
/* 筛选分类按钮 */
.down-cate-container .cate-button-container {
  width: 96%;
  height: 50px;
  margin-left: 2%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
.down-cate-container .cate-button-container div {
  width: 48%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.cate-button-container button {
  width: 98%;
  height: 77%;
  outline: 0 none !important;
  border-radius: 5px;
  border: 0px;
}
button:focus {
  outline: 0;
  border: 0px;
}
.cate-button-container .button-sure {
  background-color: orangered;
  color: white;
}
/* 分类筛选 */
.down-choose-container {
  width: 100%;
  height: 140px;
}
.choose-main {
  margin-top: 3%;
  width: 92%;
  height: 94%;
  margin-left: 4%;
  display: inline-flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}
.choose-main div {
  width: 21%;
  height: 32px;
  background-color: whitesmoke;
  text-align: center;
  line-height: 32px;
  color: grey;
  border-radius: 5px;
  font-size: 15px;
}
.choose-lastone {
  position: absolute;
  bottom: 7px;
  left: 93px;
}

/* 特色课主要内容 */
.course-main-container {
  width: 100%;
  background-color:whitesmoke;
  overflow: scroll;
  margin-top:105px;
}

/*课程列表 */
.course-main-wrapper{
  padding: 0 14px;
  margin-bottom: 15px;
  background: white;
  border-radius: 10px;
}
.course-main-wrapper .main-title {
  font-size:16px;
  padding-top:20px;
}
.course-main-wrapper .main-data {
  margin-top:12px;
}
.course-main-wrapper .main-data div{
  display: inline-flex;
}

.course-main-wrapper .teacher {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height:50px;
  width: 100%;
  border-bottom: 1px solid #f5f5f5;
}
.course-main-wrapper .teacher li {
  width: 100%;
  display: flex;
  align-items: center;
}
.course-main-wrapper .teacher li img {
  width: 27px;
  height: 27px;
  border-radius: 50%;
}
.course-main-wrapper .teacher p {
  margin: 0 8px;
  flex: 1;
}
.course-main-wrapper .info {
  display: flex;
  line-height: 40px;
  justify-content: space-between;
}
.default {
  background: #f0f2f5;
  padding: 15px;
}
/* 分类 */
.down-cate-wrapper{
  padding: 10px 15px; 
}
.down-cate-wrapper .cate-title ul {
  display: flex;
  flex-wrap: wrap;
}
.down-cate-wrapper .cate-title ul .li {
  margin-right: 10px;
  margin-bottom: 10px;
  width: 69px;
  height: 33px;
  text-align: center;
  line-height: 33px;
  background: #f5f5f5;
  color: #646464;
}
.down-cate-wrapper .cate-title ul .li1 {
  margin-right: 10px;
  margin-bottom: 10px;
  width: 69px;
  height: 33px;
  text-align: center;
  line-height: 33px;
  background: #ebeefe;
  color: #eb6100;
}
.down-cate-wrapper .cate-title p {
  padding-top: 16px;
  padding-bottom: 10px;
}
</style>
